<template>
  <div class="chat-container">
    <!-- 聊天界面内容 -->
    <div class="chat-messages">
      <!-- 消息列表 -->
    </div>
    
    <!-- 输入区域 -->
    <div class="chat-input">
      <input 
        v-model="inputMessage" 
        @keyup.enter="sendMessage"
        placeholder="请输入消息..."
        :disabled="isStreaming"
      />
      <button @click="sendMessage" :disabled="isStreaming">
        {{ isStreaming ? '发送中...' : '发送' }}
      </button>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { useChatStore } from '../stores/chat'

// 初始化聊天store
const chatStore = useChatStore()

// 响应式数据
const inputMessage = ref('')
const isStreaming = ref(false)

// 发送消息
const sendMessage = async () => {
  if (!inputMessage.value.trim()) {
    ElMessage.warning('请输入消息内容')
    return
  }

  const userMessageContent = inputMessage.value
  inputMessage.value = ''
  
  try {
    // 使用流式对话
    isStreaming.value = true
    let fullContent = ''
    
    for await (const chunk of chatStore.sendStreamMessage(userMessageContent)) {
      fullContent += chunk.content
    }
    
    isStreaming.value = false
    
  } catch (error) {
    isStreaming.value = false
    ElMessage.error('发送消息失败：' + (error instanceof Error ? error.message : '未知错误'))
  }
}
</script>

<style scoped>
.chat-container {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}

.chat-input {
  padding: 20px;
  border-top: 1px solid #eee;
  display: flex;
  gap: 10px;
}

.chat-input input {
  flex: 1;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.chat-input button {
  padding: 10px 20px;
  background-color: #409eff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.chat-input button:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}
</style>